<template>
	<view class="goods-info-container" v-if="goodsInfo.goods_price">
		<!-- 轮播图区域  circular设置为true就可以自动轮播-->
		<swiper class="swiper-container" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			:circular="true">
			<swiper-item class="swiper-item" v-for="(item, index) in  goodsInfo.pics" :key="index">
				<image class="slideshow" :src="item.pics_big" @click="preview(index)"></image>
			</swiper-item>
		</swiper>
		<!-- 商品信息区 -->
		<view class="goods-info-box">
			<!-- 商品价格 -->
			<view class="goods-price">￥{{goodsInfo.goods_price}}</view>
			<!-- 商品信息主体区 -->
			<view class="goods-info-body">
				<!-- 商品名字及介绍 -->
				<view class="goods-name">{{goodsInfo.goods_name}}</view>
				<!-- 收藏 -->
				<view class="favi">
					<!-- 收藏的星星图标 -->
					<uni-icons type="star" size="22" />
					<text>收藏</text>
				</view>
			</view>
			<view class="yf">
				<text>快递： 免运费</text>
			</view>
		</view>
		<!-- 商品详情信息-->
		<rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
		<view class="goods-nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="gotoCartOrStore"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	//导入vuex里面的数据
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		//定义一个监听器，监听 total的变化
		watch: {
			total(newValue) {
				this.initCartInfo(newValue)
			}
		},
		//在计算属性中展开store里面的属性
		computed: {
			...mapState('m_cart', ['test', 'cart']),
			...mapGetters('m_cart', ['total'])
		},
		data() {
			return {
				//初始化一个商品id变量
				goods_id: 0,
				//初始化一个商品信息的对象
				goodsInfo: {},
				//底部商品加入购物车这些东西的导航组件
				options: [{
						icon: 'shop',
						text: '店铺',
						infoBackgroundColor: '#007aff',
						infoColor: "red"
					},
					{
						icon: 'cart',
						text: '购物车',
						info: this.total
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
		//页面一加载就调用的钩子方法
		onLoad(options) {
			//打印观察传入的数据
			// console.log(options)
			//将传入的商品id赋值给本页面的商品id
			this.goods_id = options.goods_id
			//调用初始化商品信息的方法
			this.initGoodsInfo(this.goods_id)
			//初始化购物车的小红标
			this.initCartInfo(this.total)
		},
		methods: {
			//将模块里面的添加购物车方法展开到这里
			...mapMutations('m_cart', ['addToCart']),
			//添加购物车或者立即购买
			buttonClick(e) {
				//判断用户究竟是按的什么按钮
				if (e.content.text === "加入购物车") {
					//如果点击的是购物车，那么就先初始化goods对象
					const goods = {
						//// { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
						goods_id: this.goodsInfo.goods_id,
						goods_name: this.goodsInfo.goods_name,
						goods_price: this.goodsInfo.goods_price,
						goods_count: 1,
						goods_small_logo: this.goodsInfo.goods_small_logo,
						goods_state: this.goodsInfo.goods_state
					}
					//对象组装完毕   直接调用展开到这里的mutations里面的方法
					this.addToCart(goods)
				}
			},
      //找购物车的方法
			initCartInfo(newValue){
				const findResult = this.options.find(item => item.text === '购物车')
				//如果找到的东西存在
				if (findResult) {
					//对找到的东西的info重新赋值
					findResult.info = newValue
				}
			},

			//去购物车或者店铺
			gotoCartOrStore(e) {
				console.log("e==>>", e);
				//判断点击的究竟是哪个按钮
				if (e.content.text === "购物车") {
					uni.switchTab({
						url: "../../pages/cart/cart"
					})
				}
			},
			async initGoodsInfo(goods_id) {
				//根据 goods_id 请求商品详情信息
				const {
					data
				} = await uni.$http.get("/api/public/v1/goods/detail", {
					goods_id
				})
				//判断是否有获取到信息 如果没有获取到信息，就提示错误
				if (data.meta.status !== 200) return uni.$showMsg("请求失败")

				data.message.goods_introduce = data.message.goods_introduce.replace(/<img /g,
					'<img style="display:block;"').replace(/webp/g, "jpg")

				//赋值   对商品详情进行初始化
				this.goodsInfo = data.message
			},
			//点击图片进行预览
			preview(index) {
				uni.previewImage({
					//当前图片索引
					current: index,
					//所有图片的url图片数组
					urls: this.goodsInfo.pics.map(item => item.pics_big)
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods-info-container {
		padding-bottom: 50px;

		.swiper-container {
			height: 750upx;

			.swiper-item {
				.slideshow {
					width: 100%;
					height: 100%;
				}
			}
		}

		.goods-info-box {
			padding: 10px;

			.goods-price {
				color: red;
				font-size: 18px;
				margin: 10px 0;
			}

			.goods-info-body {
				display: flex;
				justify-content: space-between;

				.goods-name {
					font-size: 15px;
					margin-right: 10px;
				}

				.favi {
					width: 100px;
					font-size: 13px;
					display: flex;
					flex-direction: column;
					border-left: 1px solid #efefef;
					color: gray;
					margin-left: 10px;
					padding-left: 10px;
				}
			}

			.yf {
				font-size: 12px;
				color: gray;
				margin: 10px 0;
			}
		}

		.goods-nav {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}
	}
</style>
